<!DOCTYPE html>
<html>

<head>
	<title>{$title}</title>
    <meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="full-screen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="address=no">
	
	<!-- import CSS -->
	<link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/style.css?11">
	<script src="{$Think.config.site.resource_url}js/assets/jquery.js"></script>

	<script>
		$(function(){
			$('.screen_a').click(function(){
				$('#screen').show();
				$('#screen_bg').show();
				$('html,body').addClass('ovfHiden'); //使网页不可滚动
			})
			$('.cancel').click(function(){
				$('#screen').hide();
				$('#screen_bg').hide();
				$('html,body').removeClass('ovfHiden'); //使网页恢复可滚
			})
		})
	</script>

	<!-- import Vue before Element -->
	<script src="{$Think.config.site.resource_url}js/assets/vue.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css">

	<script src="{$Think.config.site.resource_url}js/assets/element.js"></script>

	<style type="text/css">
		.el-date-table td.current:not(.disabled) span {
			color: #fff;
			background-color: #409EFF;
			text-align: center;
		}
	</style>
</head>

<body>	
	
<!--筛选弹窗-->
<div class="screen" id="screen">
	<div class="screen_main">
		<form action="/home/Operation/index" id="form" method="get">
			<div id="time">
				<template>
					<div class="block">
						<span class="demonstration">开始时间：</span>
						<el-date-picker
								name="start_time"
								v-model="value1"
								type="datetime"
								placeholder="选择日期时间">
						</el-date-picker>
					</div>

					<div class="block">
						<span class="demonstration">结束时间：</span>
						<el-date-picker
								name="end_time"
								v-model="value2"
								type="datetime"
								placeholder="选择日期时间">
						</el-date-picker>
					</div>
				</template>

				<div class="binding_btn">
					<button class="state_confirm">确认</button>
					<button class="cancel">取消</button>
				</div>
			</div>
		</form>
    </div>
</div>
<div id="screen_bg"></div>
	
<!-- 顶部 -->
<div class="head">
	<div class="head_back"><a href="/home/Index/index"><img src="{$Think.config.site.resource_url}images/assets/arrow.png"></a></div>
    <div class="head_txt">运营管理</div>
</div>

<div class="flow_btn">
	<a href="/home/Operation/index?time=1"><button class="<?php if ($time==1) { echo 'flow_btn1'; } else { echo 'flow_btn2';} ?>">今日</button></a>
	<a href="/home/Operation/index?time=2"><button class="<?php if ($time==2) { echo 'flow_btn1'; } else { echo 'flow_btn2';} ?>">本周</button></a>
	<a href="/home/Operation/index?time=3"><button class="<?php if ($time==3) { echo 'flow_btn1'; } else { echo 'flow_btn2';} ?>">本月</button></a>
	<button class="flow_btn3 screen_a">筛选</button>
</div>

<div class="store_main">
	<ul>
		<li>
			<div class="store_head">
				<div class="store_h_left">订单统计</div>
			</div>
			<div class="store_con">
				<span class="store_sp_left">交易笔数：{$order_count}笔</span>
				<span class="store_sp_right">交易总额：{$order_amount}元</span>
			</div>

			<div class="store_con">
				<span class="store_sp_left">总佣金：{$all_brokerage}元</span>
				<span class="store_sp_right">商户佣金：{$seller_brokerage}元</span>
			</div>

			<div class="store_con">
				<span class="store_sp_left">所获佣金：{$agent_brokerage}元</span>
			</div>

		</li>
		<li>
			<div class="store_head">
				<div class="store_h_left">业务统计</div>
			</div>
			<div class="store_con">
				<span class="store_sp_left">新增地推：{$agent_count}个</span>
				<span class="store_sp_right">总地推人员：{$all_agent_count}个</span>
			</div>
			<div class="store_con">
				<span class="store_sp_left">新增商户：{$seller_count}个</span>
				<span class="store_sp_right">总商户：{$all_seller_count}个</span>
			</div>
			<div class="store_con">
				<span class="store_sp_left">新增用户：{$user_count}个</span>
				<span class="store_sp_right">总订单用户：{$all_user_count}个</span>
			</div>
		</li>
	</ul>
</div>

<script>
    /*时间选择*/
    var Main = {
        data() {
            return {
                pickerOptions1: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
            };
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#time')
</script>

